<html>
	<head>
		<title>Title</title>
		<meta charset="UTF-8">
		<!-- Import style -->
		<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
		<!-- Import Vue 3 -->
		<script src="//unpkg.com/vue@3"></script>
		<!-- Import component library -->
		<script src="//unpkg.com/element-plus"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
		<style>
            #app, body, html {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }

            .el-space {
                width: 100%;
            }

            #app {
                padding-top: 20px;
            }
		</style>
	</head>
	<body>
		<div id="app">
			<el-space direction="vertical" :fill="true" :fill-ratio="90">
				<el-card shadow="always">
					<el-steps :active="active" finish-status="success">
						<el-step title="第一步" >
							<template #description>
								输入需要生成的数据的数量
							</template>
						</el-step>
						<el-step title="第二步" >
							<template #description>
								点击 <el-tag>快速生成</el-tag> 按钮，开始生成数据
							</template>
						</el-step>
						<el-step title="第三步" >
							<template #description>
								点击 <el-tag>保存数据</el-tag> 按钮，将数据提交到后端
							</template>
						</el-step>
						<el-step title="第四步" >
							<template #description>
								点击 <el-tag>导出Excel</el-tag>
							</template>
						</el-step>
					</el-steps>
				</el-card>
				<el-card shadow="always">
					<el-form inline>
						<el-form-item label="学生数量">
							<el-input-number v-model="size" placeholder="请输入学生数量" @change="active=1"></el-input-number>
						</el-form-item>
						<el-form-item>
							<el-space>
								<el-button type="primary" @click="generateRandom">快速生成</el-button>
								<el-button type="primary" @click="save">保存数据</el-button>
								<el-link type="primary" href="/export/excel" @click="active=4">导出Excel</el-link>
							</el-space>
						</el-form-item>
					</el-form>
				</el-card>
				<el-card shadow="always">
					<el-table :data="students">
						<el-table-column label="ID" prop="id"></el-table-column>
						<el-table-column label="姓名" prop="name"></el-table-column>
						<el-table-column label="年龄" prop="age"></el-table-column>
						<el-table-column label="性别" prop="sex"></el-table-column>
						<el-table-column label="家庭住址" prop="address"></el-table-column>
						<el-table-column label="操作">
							<template #default="{row}">
								<el-button type="danger" @click="removeStudent(row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-space>
		</div>
		<script>
            const {createApp} = Vue;
            const {ElMessage} = ElementPlus
            const request = axios.create({
                baseURL: 'http://localhost',
                timeout: 1000,
                headers: {'X-Custom-Header': 'foobar'}
            });
            const app = createApp({
                data() {
                    return {
                        students: [],
                        size: 10,
                        active:0
                    }
                },
                methods: {
                    save() {
                        request.put("/export/excel", this.students,{
                            headers: {
                                ContentType:'application/json'
                            }
                        }).then(rs => {
                            if (rs.data.code == 0) {
                                this.active = 3
                                ElMessage.success('保存成功')
                            } else {
                                ElMessage.error('保存失败')
                            }
                        }).catch((err) => {
                            ElMessage.error('保存失败:' + err)
                        })
                    },
                    addStudent() {
                        const student = Mock.mock({
                            "id": '@increment()',
                            "name": "@cname",
                            "age|1-100": 1,
                            "sex|1": ["男", "女", "未知"],
                            "address": "@city(true)"
                        });
                        this.students.push(student);
                    },
                    generateRandom() {
                        this.active=2
                        for (let i = 0; i < this.size; i++) {
                            this.addStudent()
                        }
                    },
                    removeStudent(student) {
                        const index = this.students.findIndex(item => item.id == student.id);
                        this.students.splice(index, 1);
                    }
                },
            });
            app.use(ElementPlus);
            app.mount('#app');
		</script>
	</body>
</html>
